<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width: 1300px;
				height: 620px;
				background: url(baidu.jpg) no-repeat center center;
				position: relative;
			}
			.btn{
				position: absolute;
				left: 1163px;
				top:0px;
				font-size: 14px;
				cursor: pointer;
			}
			.comfirm{
				background-color: rgba(255,255,255,1);
				width:400px;
				height: 460px;
				padding: 20px;
				position: fixed;
				top:-1000px;
				display: none;
				z-index: 3;
				opacity: 0;
				transition: all .3s;
				box-shadow: 3px 3px 10px rgba(255,255,255,.3);
				
			}
			.closebtn{
				margin-left: 380px;
				cursor:pointer;
				tansition: all .3s
			}
			.img img{
				width: 200px;
				vertical-align: middle;
				margin-left: 100px;
				margin-top: 80px;
			}
		
			.anniu{
				margin-top: 80px;
				margin-left: 100px;
			}
			#queding{
				margin-right: 100px;
			}
			.left{
				margin-right: 110px;
			}
		</style>
</head>
	<body>
		<div id="mask"></div>
		<div class="box" >
			<div class="btn" id="btn">登录</div>
			<div class="comfirm" id="mycomfirm">
				<div>
					<div class="closebtn" id="closebtn">×</div>
				</div>
				<div class="logo"><img src="loginlogo.png" /></div>
				<div class="img"><img src="qrcode.png" /></div>
				<div class="anniu">
					<input type="button" value="确定" id="queding"/>
					<input type="button" id="quxiao" value="取消"/>
				</div>
			</div>
		</div>
	</body>
		<script>
			var w=document.documentElement.scrollWidth;
			var h=document.documentElement.scrollHeight;
			var btn=document.getElementById("btn");
			var mycomfirm=document.getElementById("mycomfirm");
			var closebtn=document.getElementById("closebtn");
			var queding=document.getElementById("queding");
			var quxiao=document.getElementById("quxiao");
			var hh=document.documentElement.clientHeight;
			var ww=document.documentElement.clientWidth;
			
			var mask=document.getElementById("mask");
			mask.style.width=ww+"px";
			mask.style.height=hh+"px";
			mask.style["background-color"]="rgba(0,0,0,.5)";
			mask.style.position="absolute" ;
			mask.style["z-index"]="2"
			mask.style.left="0px";
			mask.style.top="0px";
			mask.style.display="none";
			
			
			
			quxiao.onclick=closebtn.onclick=function(){
				mycomfirm.style.opacity=0;
				mycomfirm.style.top="-1000px"
				mask.style.display="none"
				setTimeout(function(){
					mycomfirm.style.display="none";
				},600)
			}
			
			btn.onclick=btnclick;
			function btnclick(){
				mask.style.display="block"
				mycomfirm.style.display="block"
				var hh=document.documentElement.clientHeight;
				var ww=document.documentElement.clientWidth;
				var comfirmw=mycomfirm.clientWidth;
				var comfirmh=mycomfirm.clientHeight;
				mycomfirm.style.left=ww/2-comfirmw/2+"px";
				mycomfirm.style.top=hh/2-comfirmh/2+"px";
				
				mycomfirm.style.opacity=1;	
			}
			
			queding.onclick=function(){
				alert("恭喜您登录成功")
				setTimeout(function(){
					mycomfirm.style.opacity=0;
					mask.style.display="none"
					mycomfirm.style.display="none";
					mycomfirm.style.top="-1000"
				},300)
				
			}
			
			window.onresize=function(){
				btnclick()
			}
			
		</script>
	

